// 创建用户相关的小仓库 user
import { defineStore } from "pinia";
import { theme } from "ant-design-vue";
import * as home from "@/api/home/index";
const useThemeStore = defineStore("Theme", {
  state: () => {
    return {
      theme: {
        token: {
          borderRadiusLG: 16,
          colorPrimary: "#1677ff",
        },
        algorithm: theme.defaultAlgorithm,
      },
      isFrostedGlass: false,
      isDarkTheme: false,
    };
  },
  actions: {
    async getColorPrimary() {
      const res = await home.getSettingByKey("themeColor_model");
      this.theme.token.colorPrimary = res.data.value;
    },
    changeTheme(color) {
      if (typeof color === "string") {
        color = color === "light" ? true : false;
      }
      this.getTheme(color);
    },
    getTheme(state) {
      const body = document.body;
      if (state) {
        this.theme.algorithm = theme.defaultAlgorithm;
        this.isDarkTheme = false;
        body.classList.remove("dark");
        body.classList.add("light");
        localStorage.setItem("theme", "light");
      } else {
        this.theme.algorithm = theme.darkAlgorithm;
        this.isDarkTheme = true;
        body.classList.add("dark");
        body.classList.remove("light");
        localStorage.setItem("theme", "dark");
      }
    },
    changeBackgroundImage(image) {
      const frostedGlass = document.querySelector(".frosted-glass");
      if (image) {
        frostedGlass.style.background = `url(${image}) no-repeat center center / cover`;
        this.isFrostedGlass = true;
      } else {
        frostedGlass.style.background = "";
        this.isFrostedGlass = false;
      }
    },
  },
});

export default useThemeStore;
